<template>
  <div class="loginContent">
    <div class="loginForm">
      <div class="imgBox">
        <div class="img">
          <i class="el-icon-user-solid"></i>
        </div>
        <div class="text" v-if="flag == 0">用户登录</div>
        <div class="text" v-else>用户注册</div>
      </div>
      <div class="title">
        <span :class="['text', flag == '0' ? 'active' : '']" @click="handleTitle('0')">账号登录</span>
        <span :class="['text', flag == '1' ? 'active' : '']" @click="handleTitle('1')">账号注册</span>
      </div>
      <div class="content">
        <el-input class="account" v-model="account" placeholder="请输入账户"></el-input>
        <el-input class="password" type="password" v-model="password" placeholder="请输入密码"></el-input>
      </div>
      <div class="btnContent">
        <div class="loginBtn btn" @click="handleLogin" v-if="flag == '0'">登录</div>
        <div class="loginBtn btn" @click="handleRegister" v-else-if="flag == '1'">注册</div>
      </div>
      <div class="tip" @click="handleTitle('1')">还没有账号？注册一个</div>
    </div>
  </div>
</template>

<script>
import { userRegister,userLogin } from "@/api/login";
import { Toast } from 'vant';
export default {
  data() {
    return {
      flag: "0", //0为登录，1为注册
      account: "",
      password: "",
    };
  },
  methods: {
    async handleLogin() {
      console.log(this.account, this.password,'a');
      
      if(this.account == '' || this.password == '') {
        Toast.fail('请输入账号密码！');
        return
      }
      const res = await userLogin({
        voucher: this.account,
        password: this.password
      })
      
      if(res.code == 200){
        Toast.success('登录成功');

        localStorage.setItem('token', res.data.token)
        this.$router.push('/home')
      }
    },
    handleTitle(flag) {
      this.flag = flag;
      this.account = "";
      this.password = "";
    },
    async handleRegister() {
      if(this.account == '' || this.password == '') {
        Toast.fail('请输入账号密码！');
        return
      }
      const data = {
        account: this.account,
        password: this.password
      }
      const res = await userRegister(data)
      console.log(res, 'res');

    }
  },
  mounted() { },
};
</script>

<style lang="less">
.loginContent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #f3f4f6;

  .loginForm {
    width: 350px;
    border-radius: 15px;
    overflow: hidden;
    background-color: #fff;

    .imgBox {
      width: 150px;
      height: 150px;
      background-color: #007aff;
      border-radius: 50%;
      position: absolute;
      left: 50%;
      top: 80px;
      transform: translateX(-50%);

      .img {
        display: flex;
        justify-content: center;
        padding-top: 20px;
        margin-bottom: 50px;

        i {
          font-size: 90px;
          color: #fff;
        }
      }

      .text {
        text-align: center;
        font-size: 20px;
      }
    }

    .title {
      height: 48px;
      display: flex;

      .text {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-weight: 500;
        font-size: 18px;
        background-color: #f5f5f6;
        color: rgba(37, 38, 43, 0.36);
      }

      .active {
        background-color: #fff;
        color: #333;
      }
    }

    .content {
      padding: 15px;

      .account,
      .password {
        margin-bottom: 15px;

        .el-input__inner {
          padding: 0 10px 0 10px;
          background-color: #f7f7f7;
          border-color: #f7f7f7;
          border-radius: 8px;

          &:focus {
            border: 1px solid rgba(99, 125, 255, 0.48) !important;
            background-color: #fff;
          }
        }
      }
    }

    .btnContent {
      width: 100%;
      padding: 0 15px 0 15px;
    }

    .loginBtn {
      width: 100%;
      height: 42px;
      border-radius: 8px;
      background-image: linear-gradient(129.12deg,
          #017bff 0%,
          #3595fd 100%);
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }

    .tip {
      margin-top: 15px;
      margin-bottom: 15px;
      color: #637dff;
      text-align: center;
      cursor: pointer;
      font-size: 12px;
    }
  }
}
</style>
